<template>
  <div class="life-contail">
    <van-nav-bar title="生活圈"
                 class="van-nav-bar_none" />
    <div class="life-weaper">
      <div class="fengniao-tabs">
        <van-tabs sticky
                  swipeable
                  v-model="active">
          <van-tab v-for="(item,index) in tabList"
                   :title="item.title"
                   :key="index">
          </van-tab>
        </van-tabs>
      </div>
      <keep-alive include="resident,community">
        <components :is="comp"></components>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import community from './compoents/community';
import resident from './compoents/resident';

export default {
  name: 'life',
  components: {
    community,
    resident,
  },
  data() {
    return {
      active: 0,
      tabList: [
        {
          title: '社区活动',
          component: 'resident',
        },
        {
          title: '通知公告',
          component: 'community',
        },
      ],
      comp: 'resident',
    };
  },
  watch: {
    $route(n, o) {
      this.init();
    },
    active(n, o) {
      this.changeTabs(this.active);
    },
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.active = this.$route.query.type || 0;
      this.changeTabs(this.active);
    },
    changeTabs(index) {
      this.comp = this.tabList[index].component;
    },
  },
};
</script>

<style lang="scss" scoped>
.life-contail {
}
.life-weaper {
  padding-top: 50px;
}
</style>

